<template>
  <el-container class="page-container org-container">
    <el-aside class="org-aside">
      <div class="org-aside-head">
        <org-search-input @change-search="onSearchChange" />
      </div>
      <div class="org-aside-body">
        <div class="org-scroll-wrap">
          <org-search-content
            v-if="isSearch"
            :search-value="searchValue"
            @item-click="onItemClick"
          />
          <org-tree v-else :list="orgTree" @item-click="onItemClick" />
        </div>
      </div>
    </el-aside>
    <el-main class="org-main">
      <org-main ref="orgMain" :main-id="mainId" :main-title="mainTitle" :main-type="mainType" />
    </el-main>
  </el-container>
</template>

<script>
  import { mapGetters } from 'vuex';
  import OrgTree from './inner/OrgTree';
  import OrgSearchInput from './inner/OrgSearchInput';
  import OrgSearchContent from './inner/OrgSearchContent';
  import OrgMain from './inner/OrgMain';

  export default {
    components: {
      OrgTree,
      OrgSearchInput,
      OrgSearchContent,
      OrgMain,
    },
    data() {
      return {
        isSearch: false,
        searchValue: '',
        mainId: 0,
        mainTitle: '',
        mainType: 'company',
      };
    },
    computed: {
      ...mapGetters('organization', ['orgTree']),
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        const { id, deptName } = this.orgTree[0];
        this.mainId = id;
        this.mainTitle = deptName;
        this.mainType = 'company';
      },
      onSearchChange(value) {
        this.isSearch = value !== '';
        setTimeout(() => {
          this.searchValue = value;
        });
      },
      onItemClick(item) {
        this.mainId = item.id;
        this.mainTitle = item.deptName;
        this.mainType = item.parentId === 0 ? 'company' : 'dept';
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    border-radius: 5px;
  }
  .org-aside-head {
    padding: 8px;
    height: 50px;
    border-bottom: 1px solid #ecf1f8;
  }
  .org-aside-body {
    height: calc(100% - 50px);
    padding: 10px 6px;
  }
  .org-scroll-wrap {
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto;
  }
  .org-main {
    padding: 0 0 0 15px;
    overflow: hidden;
  }
</style>
